/**
 * Package: svedit.select
 *
 * Licensed under the Apache License, Version 2
 *
 * Copyright(c) 2010 Alexis Deveria
 * Copyright(c) 2010 Jeff Schiller
 */

// Dependencies:
// 1) jQuery
// 2) browser.js
// 3) math.js
// 4) svgutils.js

var svgedit = svgedit || {};

(function () {

  if (!svgedit.select) {
    svgedit.select = {};
  }

  var svgFactory_;
  var config_;
  var selectorManager_; // A Singleton

  // Class: svgedit.select.Selector
  // Private class for DOM element selection boxes
  // 
  // Parameters:
  // id - integer to internally indentify the selector
  // elem - DOM element associated with this selector
  svgedit.select.Selector = function (id, elem) {
    // this is the selector's unique number
    this.id = id;

    // this holds a reference to the element for which this selector is being used
    this.selectedElement = elem;

    // this is a flag used internally to track whether the selector is being used or not
    this.locked = true;

    // this holds a reference to the <g> element that holds all visual elements of the selector
    this.selectorGroup = svgFactory_.createSVGElement({
      'element': 'g',
      'attr': { 'id': ('selectorGroup' + this.id) }
    });

    // this holds a reference to the path rect
    this.selectorRect = this.selectorGroup.appendChild(
      svgFactory_.createSVGElement({
        'element': 'path',
        'attr': {
          'id': ('selectedBox' + this.id),
          'fill': 'none',
          'stroke': '#4F80FF',
          'stroke-width': '1',
          'shape-rendering': 'crispEdges',
          'style': 'pointer-events:none'
        }
      })
    );

    if (svgedit.browser.isTouch()) {
      this.selectorRect.setAttribute("stroke-opacity", 0.3);
    }

    // this holds a reference to the grip coordinates for this selector
    this.gripCoords = {
      'nw': null,
      'n': null,
      'ne': null,
      'e': null,
      'se': null,
      's': null,
      'sw': null,
      'w': null
    };

    this.reset(this.selectedElement);
  };


  // Function: svgedit.select.Selector.reset 
  // Used to reset the id and element that the selector is attached to
  //
  // Parameters: 
  // e - DOM element associated with this selector
  svgedit.select.Selector.prototype.reset = function (e) {
    this.locked = true;
    this.selectedElement = e;
    this.resize();
    this.selectorGroup.setAttribute('display', 'inline');
  };

  // Function: svgedit.select.Selector.updateGripCursors
  // Updates cursors for corner grips on rotation so arrows point the right way
  //
  // Parameters:
  // angle - Float indicating current rotation angle in degrees
  svgedit.select.Selector.prototype.updateGripCursors = function (angle) {
    var dir_arr = [];
    var steps = Math.round(angle / 45);
    if (steps < 0) steps += 8;
    for (var dir in selectorManager_.selectorGrips) {
      dir_arr.push(dir);
    }
    while (steps > 0) {
      dir_arr.push(dir_arr.shift());
      steps--;
    }
    var i = 0;
    for (var dir in selectorManager_.selectorGrips) {
      selectorManager_.selectorGrips[dir].setAttribute('style', ('cursor:' + dir_arr[i] + '-resize'));
      i++;
    };
  };

  // Function: svgedit.select.Selector.showGrips
  // Show the resize grips of this selector
  //
  // Parameters:
  // show - boolean indicating whether grips should be shown or not
  svgedit.select.Selector.prototype.showGrips = function (show) {
    var bShow = show ? 'inline' : 'none';
    selectorManager_.selectorGripsGroup.setAttribute('display', bShow);
    var elem = this.selectedElement;
    this.hasGrips = show;
    if (elem && show) {
      this.selectorGroup.appendChild(selectorManager_.selectorGripsGroup);
      this.updateGripCursors(svgedit.utilities.getRotationAngle(elem));
    }
  };

  // Function: svgedit.select.Selector.resize
  // Updates the selector to match the element's size
  svgedit.select.Selector.prototype.resize = function () {
    var selectedBox = this.selectorRect,
      mgr = selectorManager_,
      selectedGrips = mgr.selectorGrips,
      selected = this.selectedElement,
      sw = selected.getAttribute('stroke-width'),
      current_zoom = svgFactory_.currentZoom();
    var offset = 1 / current_zoom;
    if (selected.getAttribute('stroke') !== 'none' && !isNaN(sw)) {
      offset += (sw / 2);
    }

    var tagName = selected.tagName;
    if (tagName === 'text') {
      offset += 2 / current_zoom;
    }

    // loop and transform our bounding box until we reach our first rotation
    var tlist = svgedit.transformlist.getTransformList(selected);
    var m = svgedit.math.transformListToTransform(tlist).matrix;

    // This should probably be handled somewhere else, but for now
    // it keeps the selection box correctly positioned when zoomed
    m.e *= current_zoom;
    m.f *= current_zoom;

    var bbox = svgedit.utilities.getBBox(selected);
    if (tagName === 'g' && !$.data(selected, 'gsvg')) {
      // The bbox for a group does not include stroke vals, so we
      // get the bbox based on its children. 
      var stroked_bbox = svgFactory_.getStrokedBBox(selected.childNodes);
      if (stroked_bbox) {
        bbox = stroked_bbox;
      }
    }

    // apply the transforms
    var l = bbox.x, t = bbox.y, w = bbox.width, h = bbox.height,
      bbox = { x: l, y: t, width: w, height: h };

    // we need to handle temporary transforms too
    // if skewed, get its transformed box, then find its axis-aligned bbox

    //*
    offset *= current_zoom;

    var nbox = svgedit.math.transformBox(l * current_zoom, t * current_zoom, w * current_zoom, h * current_zoom, m),
      aabox = nbox.aabox,
      nbax = aabox.x - offset,
      nbay = aabox.y - offset,
      nbaw = aabox.width + (offset * 2),
      nbah = aabox.height + (offset * 2);

    // now if the shape is rotated, un-rotate it
    var cx = nbax + nbaw / 2,
      cy = nbay + nbah / 2;

    var angle = svgedit.utilities.getRotationAngle(selected);
    if (angle) {
      var rot = svgFactory_.svgRoot().createSVGTransform();
      rot.setRotate(-angle, cx, cy);
      var rotm = rot.matrix;
      nbox.tl = svgedit.math.transformPoint(nbox.tl.x, nbox.tl.y, rotm);
      nbox.tr = svgedit.math.transformPoint(nbox.tr.x, nbox.tr.y, rotm);
      nbox.bl = svgedit.math.transformPoint(nbox.bl.x, nbox.bl.y, rotm);
      nbox.br = svgedit.math.transformPoint(nbox.br.x, nbox.br.y, rotm);

      // calculate the axis-aligned bbox
      var tl = nbox.tl;
      var minx = tl.x,
        miny = tl.y,
        maxx = tl.x,
        maxy = tl.y;

      var Min = Math.min, Max = Math.max;

      minx = Min(minx, Min(nbox.tr.x, Min(nbox.bl.x, nbox.br.x))) - offset;
      miny = Min(miny, Min(nbox.tr.y, Min(nbox.bl.y, nbox.br.y))) - offset;
      maxx = Max(maxx, Max(nbox.tr.x, Max(nbox.bl.x, nbox.br.x))) + offset;
      maxy = Max(maxy, Max(nbox.tr.y, Max(nbox.bl.y, nbox.br.y))) + offset;

      nbax = minx;
      nbay = miny;
      nbaw = (maxx - minx);
      nbah = (maxy - miny);
    }

    var dstr = 'M' + nbax + ',' + nbay
      + ' L' + (nbax + nbaw) + ',' + nbay
      + ' ' + (nbax + nbaw) + ',' + (nbay + nbah)
      + ' ' + nbax + ',' + (nbay + nbah) + 'z';
    selectedBox.setAttribute('d', dstr);

    var xform = angle ? 'rotate(' + [angle, cx, cy].join(',') + ')' : '';
    this.selectorGroup.setAttribute('transform', xform);

    if (svgedit.browser.isTouch()) {
      nbax -= 15.75;
      nbay -= 15.75;
    }
    else {
      nbax -= 4;
      nbay -= 4;
    }
    this.gripCoords = {
      'nw': [nbax, nbay].map(Math.round),
      'ne': [nbax + nbaw, nbay].map(Math.round),
      'sw': [nbax, nbay + nbah].map(Math.round),
      'se': [nbax + nbaw, nbay + nbah].map(Math.round),
      'n': [nbax + (nbaw) / 2, nbay].map(Math.round),
      'w': [nbax, nbay + (nbah) / 2].map(Math.round),
      'e': [nbax + nbaw, nbay + (nbah) / 2].map(Math.round),
      's': [nbax + (nbaw) / 2, nbay + nbah].map(Math.round)
    };

    for (var dir in this.gripCoords) {
      var coords = this.gripCoords[dir];
      selectedGrips[dir].setAttribute('x', coords[0]);
      selectedGrips[dir].setAttribute('y', coords[1]);
    };

    this.rotateCoords = {
      'nw': [nbax, nbay],
      'ne': [nbax + nbaw + 8, nbay],
      'sw': [nbax, nbay + nbah + 8],
      'se': [nbax + nbaw + 8, nbay + nbah + 8]
    };

    for (var dir in this.rotateCoords) {
      var coords = this.rotateCoords[dir];
      mgr.rotateGrips[dir].setAttribute('cx', coords[0]);
      mgr.rotateGrips[dir].setAttribute('cy', coords[1]);
    }

  };


  // Class: svgedit.select.SelectorManager
  svgedit.select.SelectorManager = function () {
    // this will hold the <g> element that contains all selector rects/grips
    this.selectorParentGroup = null;

    // this is a special rect that is used for multi-select
    this.rubberBandBox = null;

    // this will hold objects of type svgedit.select.Selector (see above)
    this.selectors = [];

    // this holds a map of SVG elements to their Selector object
    this.selectorMap = {};

    // this holds a reference to the grip elements
    this.selectorGrips = {
      'nw': null,
      'n': null,
      'ne': null,
      'e': null,
      'se': null,
      's': null,
      'sw': null,
      'w': null
    };

    this.selectorGripsGroup = null;
    //this.rotateGripConnector = null;
    this.rotateGrips = {
      'nw': null,
      'ne': null,
      'se': null,
      'sw': null
    };

    this.initGroup();
  };

  // Function: svgedit.select.SelectorManager.initGroup
  // Resets the parent selector group element
  svgedit.select.SelectorManager.prototype.initGroup = function () {
    // remove old selector parent group if it existed
    if (this.selectorParentGroup && this.selectorParentGroup.parentNode) {
      this.selectorParentGroup.parentNode.removeChild(this.selectorParentGroup);
    }

    // create parent selector group and add it to svgroot
    this.selectorParentGroup = svgFactory_.createSVGElement({
      'element': 'g',
      'attr': { 'id': 'selectorParentGroup' }
    });
    this.selectorGripsGroup = svgFactory_.createSVGElement({
      'element': 'g',
      'attr': { 'display': 'none' }
    });
    this.selectorParentGroup.appendChild(this.selectorGripsGroup);
    svgFactory_.svgRoot().appendChild(this.selectorParentGroup);

    this.selectorMap = {};
    this.selectors = [];
    this.rubberBandBox = null;

    for (var dir in this.rotateGrips) {
      var grip = svgFactory_.createSVGElement({
        'element': 'circle',
        'attr': {
          'id': 'selectorGrip_rotate_' + dir,
          'fill': '#000',
          'r': 8,
          'stroke': '#000',
          "fill-opacity": 0,
          "stroke-opacity": 0,
          'stroke-width': 0,
          'style': 'cursor:url(' + config_.imgPath + 'rotate.png) 12 12, auto;'
        }
      })
      $.data(grip, 'dir', dir);
      $.data(grip, 'type', 'rotate');
      this.rotateGrips[dir] = this.selectorGripsGroup.appendChild(grip);
    }

    // add the corner grips
    for (var dir in this.selectorGrips) {
      var grip = svgFactory_.createSVGElement({
        'element': 'rect',
        'attr': {
          'id': ('selectorGrip_resize_' + dir),
          'width': 8,
          'height': 8,
          'fill': "#4F80FF",
          'stroke': "rgba(0,0,0,0)",
          'stroke-width': 1,
          'style': ('cursor:' + dir + '-resize'),
          'pointer-events': 'all'
        }
      });
      if (svgedit.browser.isTouch()) {

        grip.setAttribute("width", 30.5)
        grip.setAttribute("height", 30.5)
        grip.setAttribute("fill-opacity", 0.3)
      }

      $.data(grip, 'dir', dir);
      $.data(grip, 'type', 'resize');
      this.selectorGrips[dir] = this.selectorGripsGroup.appendChild(grip);
    }

    if ($('#canvasBackground').length) return;

    var dims = config_.dimensions;
    var canvasbg = svgFactory_.createSVGElement({
      'element': 'svg',
      'attr': {
        'id': 'canvasBackground',
        'width': dims[0],
        'height': dims[1],
        'x': 0,
        'y': 0,
        'overflow': (svgedit.browser.isWebkit() ? 'none' : 'visible'), // Chrome 7 has a problem with this when zooming out
        'style': 'pointer-events:none'
      }
    });

    var defs = svgFactory_.createSVGElement({
      'element': 'defs',
      'attr': {
        'id': 'placeholder_defs'
      }
    })

    var pattern = svgFactory_.createSVGElement({
      'element': 'pattern',
      'attr': {
        'id': 'checkerPattern',
        'patternUnits': 'userSpaceOnUse',
        'x': 0,
        'y': 0,
        'width': 20,
        'height': 20,
        'viewBox': '0 0 10 10'
      }
    })

    var pattern_bg = svgFactory_.createSVGElement({
      'element': 'rect',
      'attr': {
        'x': 0,
        'y': 0,
        'width': 10,
        'height': 10,
        'fill': "#fff"
      }
    })

    var pattern_square1 = svgFactory_.createSVGElement({
      'element': 'rect',
      'attr': {
        'x': 0,
        'y': 0,
        'width': 5,
        'height': 5,
        'fill': "#eee"
      }
    })

    var pattern_square2 = svgFactory_.createSVGElement({
      'element': 'rect',
      'attr': {
        'x': 5,
        'y': 5,
        'width': 5,
        'height': 5,
        'fill': "#eee"
      }
    })

    var rect = svgFactory_.createSVGElement({
      'element': 'rect',
      'attr': {
        'width': '100%',
        'height': '100%',
        'x': 0,
        'y': 0,
        'stroke-width': 1,
        'stroke': '#000',
        'fill': 'url(#checkerPattern)',
        'style': 'pointer-events:none'
      }
    });

    // Both Firefox and WebKit are too slow with this filter region (especially at higher
    // zoom levels) and Opera has at least one bug
    //  if (!svgedit.browser.isOpera()) rect.setAttribute('filter', 'url(#canvashadow)');
    canvasbg.appendChild(defs);
    defs.appendChild(pattern);
    pattern.appendChild(pattern_bg);
    pattern.appendChild(pattern_square1);
    pattern.appendChild(pattern_square2);
    canvasbg.appendChild(rect);

    svgFactory_.svgRoot().insertBefore(canvasbg, svgFactory_.svgContent());
  };

  // Function: svgedit.select.SelectorManager.requestSelector
  // Returns the selector based on the given element
  //
  // Parameters:
  // elem - DOM element to get the selector for
  svgedit.select.SelectorManager.prototype.requestSelector = function (elem) {
    if (elem == null) return null;
    var N = this.selectors.length;
    // If we've already acquired one for this element, return it.
    if (typeof (this.selectorMap[elem.id]) == 'object') {
      this.selectorMap[elem.id].locked = true;
      return this.selectorMap[elem.id];
    }
    for (var i = 0; i < N; ++i) {
      if (this.selectors[i] && !this.selectors[i].locked) {
        this.selectors[i].locked = true;
        this.selectors[i].reset(elem);
        this.selectorMap[elem.id] = this.selectors[i];
        return this.selectors[i];
      }
    }
    // if we reached here, no available selectors were found, we create one
    this.selectors[N] = new svgedit.select.Selector(N, elem);
    this.selectorParentGroup.appendChild(this.selectors[N].selectorGroup);
    this.selectorMap[elem.id] = this.selectors[N];
    return this.selectors[N];
  };

  // Function: svgedit.select.SelectorManager.releaseSelector
  // Removes the selector of the given element (hides selection box) 
  //
  // Parameters:
  // elem - DOM element to remove the selector for
  svgedit.select.SelectorManager.prototype.releaseSelector = function (elem) {
    if (elem == null) return;
    var N = this.selectors.length,
      sel = this.selectorMap[elem.id];
    for (var i = 0; i < N; ++i) {
      if (this.selectors[i] && this.selectors[i] == sel) {
        if (sel.locked == false) {
          // TODO(codedread): Ensure this exists in this module.
          console.log('WARNING! selector was released but was already unlocked');
        }
        delete this.selectorMap[elem.id];
        sel.locked = false;
        sel.selectedElement = null;
        sel.showGrips(false);

        // remove from DOM and store reference in JS but only if it exists in the DOM
        try {
          sel.selectorGroup.setAttribute('display', 'none');
        } catch (e) { }

        break;
      }
    }
  };

  // Function: svgedit.select.SelectorManager.getRubberBandBox
  // Returns the rubberBandBox DOM element. This is the rectangle drawn by the user for selecting/zooming
  svgedit.select.SelectorManager.prototype.getRubberBandBox = function () {
    if (!this.rubberBandBox) {
      this.rubberBandBox = this.selectorParentGroup.appendChild(
        svgFactory_.createSVGElement({
          'element': 'rect',
          'attr': {
            'id': 'selectorRubberBand',
            'fill': 'none',
            'stroke': '#666',
            'stroke-width': 1,
            'stroke-dasharray': '3,2',
            'display': 'none',
            'style': 'pointer-events:none'
          }
        })
      );
    }
    return this.rubberBandBox;
  };


  /**
   * Interface: svgedit.select.SVGFactory
   * An object that creates SVG elements for the canvas.
   *
   * interface svgedit.select.SVGFactory {
   *   SVGElement createSVGElement(jsonMap);
   *   SVGSVGElement svgRoot();
   *   SVGSVGElement svgContent();
   *
   *   Number currentZoom();
   *   Object getStrokedBBox(Element[]); // TODO(codedread): Remove when getStrokedBBox() has been put into svgutils.js
   * }
   */

  /**
   * Function: svgedit.select.init()
   * Initializes this module.
   *
   * Parameters:
   * config - an object containing configurable parameters (imgPath)
   * svgFactory - an object implementing the SVGFactory interface (see above).
   */
  svgedit.select.init = function (config, svgFactory) {
    config_ = config;
    svgFactory_ = svgFactory;
    selectorManager_ = new svgedit.select.SelectorManager();
    //for hovering elements
    svgFactory_.createSVGElement({
      'element': 'g',
      'attr': {
        'id': 'hover_group'
      }
    })
  };

  /**
   * Function: svgedit.select.getSelectorManager
   *
   * Returns:
   * The SelectorManager instance.
   */
  svgedit.select.getSelectorManager = function () {
    return selectorManager_;
  };

})();